<template>
  <div style="margin-top: 20px;">
    <ele-pro-table ref="table" :columns="columns" :datasource="url" :selection.sync="selection" :where="where"
                   height="calc(100vh - 315px)">
      <template slot="toolbar">
        <div class="exportBtn"  >
          <el-button icon="el-icon-download"  type="primary"
                     class="ele-btn-icon" size="small" @click="downloadModel">
            下载模板
          </el-button>
          <el-button icon="el-icon-upload2"  type="primary"
                     :disabled="projectStatus==='已关闭'||projectStatus==='已归档'||projectStatus==='已完成'"
                     class="ele-btn-icon" size="small" @click="importAll">
            导入
          </el-button>
          <el-button icon="el-icon-delete"
                     :disabled="!this.selection.length||(projectStatus==='已关闭'||projectStatus==='已归档'||projectStatus==='已完成')" type="primary"
                     size="small" @click="confirmDel(deleteAllData)">
            批量删除
          </el-button>
        </div>

      </template>
      <template slot="action" slot-scope="{row}" title="删除" :destroy-on-close="true" >

        <el-popconfirm
          v-if="!(projectStatus==='已关闭'||projectStatus==='已归档'||projectStatus==='已完成')"
          @confirm="confirmDel([row.id])"
          title="确认删除该设备？"
        >
          <div slot="reference">
            <i class="el-icon-delete" style="font-size: 22px;color:#F56C6C; cursor: pointer"></i>
          </div>
        </el-popconfirm>

      </template>
    </ele-pro-table>
    <productTemplate :visible.sync="showImport" :id="id" @done="completeImport" type="product"></productTemplate>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import productTemplate from "@/views/project/projectList/info/components/equipment/componets/template.vue";
export default {
  name: "index",
  props: ['id'],
  components: {
    productTemplate
  },
  data() {
    return {
      deleteAllData: [],
      columns: [{
        columnKey: 'selection',
        type: 'selection',
        width: 45,
        align: 'center',
        fixed: "left"
      },
        {
          prop: 'name',
          label: '出厂编号',
          width: 150,
          align: 'center',
          showOverflowTooltip: true,
        },
        {
          prop: 'type',
          label: '设备型号',
          showOverflowTooltip: true,
          minWidth: 120,
          align: 'center',
        },
        {
          prop: 'customer_name',
          label: '客户名称',
          showOverflowTooltip: true,
          minWidth: 120,
          align: 'center',
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 80,
          align: 'center',
          resizable: false,
          slot: 'action',
          fixed: "right"
        }
      ],
      url: `/projects/${this.id}/products`,
      selection: [],
      where: {},
      showImport: false,
      project_number:null,
      projectStatus:null,
      model:'#',
    }
  },
  mounted() {
    this.project_number=this.$route.query.project_number
    this.getProjectInfo()
    this.getModel()
  },
  methods: {
    downloadModel(){
      window.open(this.model,'_self');
    },
    getModel(){
      this.$http.get('/template/project_product').then((res) => {
        this.model = res.data.data
        //聚焦刷新
        this.$forceUpdate()
      })

    },
    getProjectInfo(){
      this.loading = true
      this.$http.get('/projects',{params:{project_number:this.project_number}}).then(res=>{
        if(res.data.code===0){
          this.projectStatus=res.data.data[0].status_text
        }
        this.loading = false
      })
    },
    /*删除项目设备  */
    confirmDel(data) {
      this.loading = true
      this.$http.post(`/projects/products_unbind`, {product_ids: data}).then(res => {
        this.loading = false
        if (res.data.success) {
          this.$message.success(res.data.msg);
          this.reload()
        } else {
          this.loading = false
          this.$message.error(res.data.msg);
        }
      })
    },
    importAll() {
      this.showImport = true
    },
    completeImport() {
      this.showImport = false
      this.reload()
    },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({where: this.where});
    },
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  created() {
  },
  watch: {
    selection() {
      this.deleteAllData = this.selection.map(item => {
        return item.id
      })
      console.log(this.deleteAllData)
    }

  },
}
</script>

<style scoped>

</style>
